<template>
	<div class="tobeDone">
		<el-tabs
			v-model="state.activeName"
			v-loading="state.loading"
			class="demo-tabs"
			@tab-change="handleClick"
		>
			<el-tab-pane label="项目类型" name="1"></el-tab-pane>
			<el-tab-pane label="决策会议" name="0"></el-tab-pane>
		</el-tabs>

		<tableIndex
			:tableData="tableData"
			:tableHead="tableHead"
			:isIndex="true"
			:isSelection="true"
			:isRadio="false"
			:fields="state.fields"
			:height="500"
			:page="page"
			@selectChange="selectChange"
			@searchList="searchList"
			@page-change="pageChange"
		>
			<template #btns>
				<div style="float: right" v-show="state.activeName == 1">
					<el-button size="small" plain @click="markReadHandler(1)"
						><svg-icon icon-class="export" /> 标记已读</el-button
					>
					<el-button
						size="small"
						plain
						class="update"
						@click="markReadHandler(0)"
						><svg-icon icon-class="export" /> 全部已读</el-button
					>
				</div>
			</template>
			<template #operate>
				<el-table-column label="操作" width="100"  align="center" fixed="right">
					<template #default="{ row }">
						<el-button
							size="small"
							class="look"
							type="primary"
							@click="lookHandler(row)"
							>查看</el-button
						>
					</template>
				</el-table-column>
			</template>
		</tableIndex>
	</div>
</template>

<script setup>
import tableIndex from "@/components/table/index.vue";
import { homeToDoPage } from "@/api/project";
import { ref, onMounted, reactive } from "vue";
import { ElMessage, ElTabPane, ElTabs } from "element-plus";
import { useRouter } from "vue-router";
components: {
	tableIndex;
}

const tableData = ref([
	{
		date: "2016-05-03",
		name: "Tom",
		address: "122222222222222222222222",
	},
	{
		date: "2016-05-02",
		name: "Tom",
		address: "1",
	},
	{
		date: "2016-05-04",
		name: "Tom",
		address: "1",
	},
	{
		date: "2016-05-01",
		name: "Tom",
		address: "1",
	},
]);
const tableHead = ref([
	{
		prop: "jobType",
		label: "任务类型",
		width: "120",
		formatter: (row) => {
			let str = "";
			switch (row.msgContent.jobType) {
				case "1":
					str = "任务指派";
					break;
				case "2":
					str = "质量监督巡检";
					break;
				case "3":
					str = "节点前置/后置";
					break;
				case "4":
					str = "任务预警/督办";
					break;
				case "5":
					str = "项目任务审核";
					break;

				default:
					break;
			}
			return str;
		},
	},
	{
		prop: "projectName",
		label: "项目名称",
		width: "180",
		formatter: (row) => {
			return row.msgContent.projectName;
		},
	},
	{
		prop: "createTime",
		label: "时间",
	},
	{
		prop: "status",
		label: "状态",
		formatter: (row) => {
			let str = "";
			switch (row.status) {
				case -1:
					str = "未读";
					break;
				case 1:
					str = "已读";
					break;

				default:
					break;
			}
			return str;
		},
	},
]);
const state = reactive({
	fields: [
		{
			key: "jobType",
			label: "任务类型",
			type: "select",
			options: {
				list: [
					{
						label: "1",
						value: "任务指派",
					},
					{
						label: "2",
						value: "质量监督巡检",
					},
					{
						label: "3",
						value: "节点前置/后置",
					},
					{
						label: "4",
						value: "任务预警/督办",
					},
					{
						label: "5",
						value: "项目任务审核",
					},
				],
			},
		},
		{
			key: "projectName",
			label: "任务名称",
			type: "input",
			placeholder: "任务名称关键字搜索",
		},
	], //查询条件
	activeName: "1",
	loading: false,
	checkList: [],
	page: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
});
//选中变化
const selectChange = (e) => {
	state.checkList = e;
};
//分页变化
const pageChange = (e) => {
	state.page.page = e.page;
	state.page.pageSize = e.limit;

	getPage();
};
//搜索查询
const searchList = (e) => {
	getPage(e);
};
const markReadHandler = async (val) => {
	let obj = {
		msgIds: [],
	};
	if (val) {
		if (state.checkList?.length > 0) {
			obj.msgIds = [...state.checkList.map((item) => item.msgId)];
		} else {
			return ElMessage.warning("请选择要标记的数据");
		}
		//全部已读
	} else {
		//标记已读
		obj.msgIds = [];
	}
	await homeToDoPage.updateStatus({ msgIds: obj.msgIds }).then((res) => {
		if (res.code == 200) {
			getPage();
		}
	});
};
//获取分页信息
const getPage = async (e) => {
	let obj = {
		pageNum: state.page.page,
		pageSize: state.page.pageSize,
		param: {
			...e,
			businessType: 1,
		},
	};
	await homeToDoPage.getMyProjectMsgPage(obj).then((res) => {
		if (res.code == 200) {
			state.loading = false;
			state.page.total = res.data.total;
			tableData.value = res.data.content;
		}
	});
};
const handleClick = (e) => {
	switch (state.activeName) {
		case "1":
			state.fields = [
				{
					key: "jobType",
					label: "任务类型",
					type: "select",
					options: {
						list: [
							{
								label: "1",
								value: "任务指派",
							},
							{
								label: "2",
								value: "质量监督巡检",
							},
							{
								label: "3",
								value: "节点前置/后置",
							},
							{
								label: "4",
								value: "任务预警/督办",
							},
							{
								label: "5",
								value: "项目任务审核",
							},
						],
					},
				},
				{
					key: "projectName",
					label: "任务名称",
					type: "input",
					placeholder: "任务名称关键字搜索",
				},
			];
			break;
		case "0":
			state.fields = [
				{
					key: "projectName",
					label: "会议名称",
					type: "input",
					placeholder: "会议名称关键字搜索",
				},
				{
					key: "jobType",
					label: "项目",
					type: "select",
					options: {
						list: [
							{
								label: "1",
								value: "任务指派",
							},
							{
								label: "2",
								value: "质量监督巡检",
							},
							{
								label: "3",
								value: "节点前置/后置",
							},
							{
								label: "4",
								value: "任务预警/督办",
							},
							{
								label: "5",
								value: "项目任务审核",
							},
						],
					},
				},
				{
					key: "jobType",
					label: "合同状态",
					type: "select",
					options: {
						list: [
							{
								label: "1",
								value: "任务指派",
							},
							{
								label: "2",
								value: "质量监督巡检",
							},
							{
								label: "3",
								value: "节点前置/后置",
							},
							{
								label: "4",
								value: "任务预警/督办",
							},
							{
								label: "5",
								value: "项目任务审核",
							},
						],
					},
				},
			];
			break;

		default:
			break;
	}
};
let router = useRouter();
//查看任务信息
const lookHandler = (row) => {
	router.push({
		path: "/constructionProjectManage/projectSupervision/index",
	});
};
onMounted(() => {
	getPage();
});
</script>

<style lang="scss" scoped>
.tobeDone {
	width: 100%;
	height: 100%;
}
</style>
